<!-- 家具租用支付详情 -->
<template>
	<view class="content">
		<!--签约房屋信息-->
		<view class="content_1" v-if="GoodsInfo.goods_type == 2 || show">
			<view class="house_view">
				<image class="house_img" :src="GoodsInfo.cover_image"></image>
				<view class="house_detail">
					<view class="house_name">{{GoodsInfo.goods_name}}</view>
					<view class="house_info" v-if="goods_type == 2">·租期：{{order_detail_list[0].rentmoney_show}}</view>
					<view class="house_info" v-if="goods_type == 2">·扣租：{{order_detail_list[0].way_show}}</view>
					<view class="house_money" v-if="goods_type == 2">押金：¥ {{order_detail_list[0].months_money}}</view>
					<view class="house_money" v-if="goods_type == 1 || show">价格：¥ {{GoodsInfo.sell_price}}</view>
					
				</view>
			</view>
		</view>
		<!--支付信息-->
		<view class="content_2">
			<view class="title_2">支付信息</view>
			<view class="integral_view">
				<view class="integral_text">积分抵扣</view>
				<switch color="#00E266" :checked="switchPoint" @change="change_point"  ></switch>
			</view>
		</view>
		<!--费用详细-->
		<view class="content_3">
			<!-- <block v-for="(data, index) in order_detail_list" :key='index'>
				<view class="detail_money">
					<view class="costdetail_box">
						<view class="cost_name">{{data.goods_name}}</view>
						<view class="cost_time">（数量：{{data.buy_num == undefined ? '1':data.buy_num}}个  *  ￥{{data.goods_price}}）</view>
					</view>
					<view class="cost_money">{{data.current_pay_money}}</view>
				</view>
			</block> -->
			
			<view class="detail_money" v-if="goods_type == 1">
				<view class="costdetail_box">
					<view class="cost_name">服务费</view>
					<view class="cost_time">（按租用比例{{tipMoney}}）</view>
				</view>
				<view class="cost_money">￥{{orderInfo.tip_money}}</view>
			</view>
			<view class="detail_money" v-if="goods_type == 2">
				<view class="costdetail_box">
					<view class="cost_name">押金</view>
					<view class="cost_time"></view>
				</view>
				<view class="cost_money">￥{{order_detail_list[0].months_money}}</view>
			</view>
			<!-- 显示积分信息 -->
			<block v-if="goods_type == 1">				
				<view class="detail_money">
					<view class="costdetail_box">
						<view class="cost_name">抵扣积分</view>
						<view class="cost_time"></view>
					</view>
					<view class="cost_money" style="color: #FE4E2C;">{{use_point}}</view>
				</view>
				
				<view class="detail_money">
					<view class="costdetail_box">
						<view class="cost_name">抵扣金额</view>
						<view class="cost_time"></view>
					</view>
					<view class="cost_money" style="color: #FE4E2C;">- ￥{{point_money}}元</view>
				</view>
				
				<view class="detail_money">
					<view class="costdetail_box">
						<view class="cost_name">优惠金额</view>
						<view class="cost_time"></view>
					</view>
					<view class="cost_money" style="color: #FE4E2C;">- ￥{{point_money}}元</view>
				</view>
			</block>			
		</view>
		<!--底部提交-->
		<view class="content_5">
			<view class="total_view">
				<image class="total_icon" src="../../../../static/index/detail/pay/house_pay.svg"></image>
				<view class="total_money">
					<view class="pay_money">￥{{totalMoney}}</view>
					<view class="count_money">已优惠￥{{point_money}}</view>
				</view>
				<view class="service_money">含服务费￥{{orderInfo.tip_money}}</view>
			</view>
			<view class="submit" @click="toPay">去支付</view>
		</view>
	</view>
</template>

<script>
	import {Request} from '../../../../utils/request.js';	// 导入接口请求文件
	import Config from '../../../../utils/config.js';		// 导入配置文件
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				GoodsInfo: '',				//  商品详情
				goods_type: '',				//  商品类型 1是：直接购买。 2是：租用商品
				orderInfo: '',				//  订单详情
				tip_money: parseFloat('0.00').toFixed(2),		//  服务费
				order_detail_list: [],		//	直接购买订单详情列表
				show: false,				//	控制显示商品图片
				switchPoint: false,			//	积分开关
				tipMoney: Config.service.tipMoney,	// 服务费显示
				district_money: parseFloat('0.00').toFixed(2),	// 优惠价格显示
				totalMoney: parseFloat('0.00').toFixed(2),			//  商品总价
				use_point: parseFloat('0.00').toFixed(2),			// 积分抵扣个数
				point_money: parseFloat('0.00').toFixed(2),			//  抵扣积分金额
			}
		},
		methods: {
			//	使用积分开关按钮
			change_point: function(e){
				if(e.detail.value == false){
					this.district_money = parseFloat('0.00').toFixed(2);					// 优惠价格
					let totleMoney = parseFloat(this.totalMoney) + parseFloat(this.orderInfo.discount_price.point_money);
					this.totalMoney = parseFloat(totleMoney).toFixed(2);
					this.use_point = parseFloat('0.00').toFixed(2);				//  抵扣积分数
					this.point_money = parseFloat('0.00').toFixed(2);			//  抵扣金额
				}
				if(e.detail.value == true){
					if(this.goods_type == 1){
						this.district_money = parseFloat(this.orderInfo.discount_price.district_money).toFixed(2);		// 优惠价格
						let totleMoney = parseFloat(this.totalMoney) - parseFloat(this.orderInfo.discount_price.point_money);
						this.totalMoney = parseFloat(totleMoney).toFixed(2);
						this.use_point = this.orderInfo.discount_price.use_point;	//  抵扣积分数
						this.point_money = parseFloat(this.orderInfo.discount_price.point_money).toFixed(2);	//  抵扣金额
					}
				}
				this.goods_type == 1 ? this.typeOne(e) : this.typeTwo(e);
			},
			// 立即购买商品触发积分
			typeOne: function(e)
			{
				if(this.switchPoint == false){
					this.switchPoint = !this.switchPoint;
					new Request().showToast('暂无积分可使用','none',()=>{
						setTimeout(() => {
							this.$nextTick(()=>{
								this.switchPoint = false;
							});
						}, 1500);
					});
					return;
				}
				this.switchPointStatus = e.detail.value;
			},
			// 租用商品触发积分
			typeTwo: function(e)
			{
				if(e.detail.value == true){		//	判断是否使用积分抵扣
					this.point_type = 'open';
					this.switchPoint = !e.detail.value;
					this.switchPoint = !this.switchPoint;
					new Request().showToast('支付押金不可积分抵扣','none',()=>{
						setTimeout(() => {
							this.$nextTick(()=>{
								this.switchPoint = false;
							});
						}, 1500);
					});
				}else{
					//	关闭积分按钮
					this.point_type = 'close';
					this.switchPoint = e.detail.value;
					this.switchPointStatus = e.detail.value;
				}
			},
			toPay: function() {
				let pointMoney = this.switchPointStatus?this.orderInfo.discount_price.point_money:0;
				// 原支付接口 goods/pay/Pay_Goods_Order/PayOrder
				// 新商品租用：支付接口 goods/pay/Pay_Goods_Order/PayOrder
				let rentUrl = 'payment/PayGoodsRentDepositMoney/PayOrder';			// 商品租用：押金支付接口
				let instantUrl = 'payment/PayGoodsInstantMoney/PayOrder';			// 商品直接购买支付接口
				// goods_type:商品类型 1是：直接购买。 2是：商品租用。
				let url = this.goods_type == 2 ? rentUrl : instantUrl;
				new Request(url).request(
					()=>{
						return 'POST'
					},
					()=>{
						return {
							openid: app.globalData.openid,
							userid: app.globalData.userid,
							order_id: this.order_id,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project,
							pointMoney: pointMoney,
						}
					},
					(res)=>{
						//判断
						if(res.data.code == 0){
							new Request().showToast(res.data.msg);
							return;
						}
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp.toString(),
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.sign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.reLaunch({
									url:'/pages/index/index'
								})
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									position: 'center',
									title: '已取消支付',
									icon: 'none'
								})
							}
						});
					}
				)
			}
		},
		onLoad(option) {			
			if (typeof option.goodsinfo !== "undefined" && option.goodsinfo !== null)
			{
				this.GoodsInfo = JSON.parse(decodeURIComponent(option.goodsinfo));
				this.show = true;
				// console.log('GoodsInfo',this.GoodsInfo)
			}
			var API_URL = 'goods/Get_Order_Detail/GetOrderDetail';
			this.order_id = option.orderid;
			new Request(API_URL).request(
				()=>{
					return 'POST'
				},
				()=>{
					return {
						openid: app.globalData.openid,
						userid: app.globalData.userid,
						// openid: 'oYJnf4gV1-rjeacjW3UnrqSe0Ppc',
						// userid: 43,
						order_id: this.order_id,
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project,
					}
				},
				(res)=>{
					if(res.data.code == 1){
						let ResponseData = res.data.data;		// 商品详情
						let ResponsePay  = res.data.orderInfo;	// 订单详情
						this.order_detail_list = ResponseData;	//	详情列表
						this.orderInfo = ResponsePay;			//	支付详情
						this.switchPoint = ResponsePay.discount_price.is_point_money == 1 ? true : false;	//	积分开关
						ResponsePay['discount_price']['district_money']	= parseFloat(ResponsePay['discount_price']['district_money']).toFixed(2);	// 已优惠价格
						this.district_money = ResponsePay.discount_price.district_money;	// 优惠价格显示
						this.totalMoney = parseFloat(ResponsePay.total_money).toFixed(2);	// 订单总价
						this.goods_type = ResponseData[0]['goods_type'];	//  商品类型 1是：直接购买。 2是：租用商品
						//	如果是租用商品支付的租金 则没有积分可抵扣
						if(ResponseData[0]['goods_type'] == 2){
							this.switchPoint = false;
							this.totalMoney  = (parseFloat(this.totalMoney) + parseFloat(ResponsePay['discount_price']['district_money'])).toFixed(2);
							this.district_money = '0.00';
							return;
						}
						if(ResponseData[0]['goods_type'] == 1){
							this.switchPointStatus = ResponsePay.discount_price.is_point_money == 1 ? true : false;
							this.use_point = ResponsePay.discount_price.use_point;								//  抵扣积分数
							this.point_money = parseFloat(ResponsePay.discount_price.point_money).toFixed(2);	//  积分抵扣金额
						}
					}
					if(res.data.code != 1){
						new Request().showToast(res.data.msg);
						return;
					}
				}
			);
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 190upx;
	}

	/*
		房源详细样式
	*/
	.content_1 {}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		padding: 27upx 24upx;
		display: flex;
		align-items: center;
	}

	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		width: 400upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	/*
		支付信息样式
	*/
	.content_2 {
		height: 88upx;
		background-color: #B3E9DC;
		display: flex;
		align-items: center;
		padding-left: 30upx;
	}

	.title_2 {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #FFFFFF;
		margin-right: 50upx;
		white-space: nowrap;
	}

	.integral_view {
		height: 42upx;
		width: 430upx;
		background-color: #FFFFFF;
		border-top-left-radius: 30upx;
		border-bottom-left-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25upx 65upx;
	}

	.integral_text {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #666666;
	}

	/*
		费用详细样式
	*/
	.content_3 {
		/* height: 340upx; */
		margin: 0 15upx;
		border-radius: 26upx;
		background-color: #FFFFFF;
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 40upx;
	}

	.detail_money {
		width: 100%;
		height: 38upx;
		line-height: 38upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 0;
	}

	.costdetail_box {
		height: 38upx;
		font-size: 28upx;
		display: flex;
		align-items: baseline;
		color: #333333;
	}

	.cost_name {
		margin-right: 10upx;
	}

	.cost_time {
		font-size: 18upx;
		color: #999999;
	}

	.cost_money {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #999999;
	}

	/*
		优惠券样式
	*/
	.content_4 {
		height: 120upx;
		margin-top: 40upx;
	}

	.coupon_view {
		height: 120upx;
		margin: 0 15upx;
		border-radius: 26upx;
		background-color: #FFFFFF;
		padding: 0upx 70upx;
		display: flex;
		align-items: center;
	}

	.coupon_icon {
		height: 28upx;
		width: 28upx;
		border-radius: 28upx;
		border: 5upx solid #999999;
		margin-right: 35upx;
		box-sizing: border-box;
	}

	.coupon_icon_active {
		height: 28upx;
		width: 28upx;
		border-radius: 28upx;
		border: 10upx solid #519DFF;
		margin-right: 35upx;
		box-sizing: border-box;
	}

	.coupon_name {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #999999;
	}

	.coupon_name_active {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #519dff;
	}

	/*
		底部提交样式
	*/
	.content_5 {
		position: fixed;
		z-index: 999;
		height: 100upx;
		width: 734upx;
		background-color: #49453A;
		bottom: 0upx;
		left: 0upx;
		padding-left: 20upx;
	}

	.total_view {
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.total_icon {
		height: 92upx;
		width: 92upx;

	}

	.total_money {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 10upx;
		margin-left: 20upx;
	}

	.pay_money {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.count_money {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
	}
	
	.service_money{
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		margin-top: -35upx;
		margin-left: -25upx;
	}

	.submit {
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}
</style>
